<template>
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader
        title="航线货物关联统计"
        @change="change"
        :withExportButton="false"
        @search="search"
        mode="multiple"
        selectPlaceholder="目的地"
        :optionLists="destination"
      />
    </div>
    <div class="content_top">
      <div class="header">
        <p>不同综合风险等级货物对应不同航线比例</p>
        <div class="conten">
          <div class="log_cont">
            <div class="cont" v-for="(item, index) in treeTitles" :key="index" @click="ups(item, index)">
              <div :class="active == index ? 'log_types' : 'log_type'">{{ item.name }}</div>
            </div>
          </div>
          <span>{{ active == 1 ? '单位：件' : '单位：千克' }}</span>
        </div>
      </div>
      <div id="echarts-proportion"></div>
    </div>
    <div class="content_bottom">
      <div class="header">
        <p>不同综合风险等级货物分布比例</p>
      </div>
      <div class="content_classification">
        <div class="chart">
          <GraphicEchart :texter="dataall" @echar="echar" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datarisk" @echar="echar" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="dataLowrisk" @echar="echar" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datafirst" @echar="echar" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="dataordinary" @echar="echar" />
        </div>
        <div class="chart">
          <GraphicEchart :texter="datastrictly" @echar="echar" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { eleCake } from '@/utils/app-ecahrts'
import GraphicEchart from '../components/graphicHome.vue'
import SecurityCheckHeader from '../components/securityCheckHeader.vue'
import { agent, routeall, agentPiece } from '@/api/statistics/statistics.js'
export default {
  data() {
    return {
      Company: '件',
      treeTitles: [
        {
          name: '重量',
        },
        {
          name: '件数',
        },
      ],
      active: 1,
      multiple: 'multiple',
      queryData: {
        beginDate: '',
        endDate: '',
        places: [],
        proxyId: '',
      },
      queryDatacopy: {},
      destination: [],
      dataall: {
        id: 7,
        name: '总件数',
        name2: '总件数',
        cont: '20000',
        top: '35%',
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        data: [
          { value: 335, name: '1' },
          { value: 0, name: '2' },
        ],
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#9B73B4', '#66ACD4', '#85C997', '#F1B172', '#E86E5A'],
      },
      datarisk: {
        id: 8,
        formatter: '{c}%',
        name: '高风险',
        name2: '高风险',
        cont: '70%',
        top: '35%',
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#E7EBF4', '#EE50A6'],
      },
      dataLowrisk: {
        id: 9,
        formatter: '{c}%',
        name: '低风险',
        name2: '低风险',
        cont: '70%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#E7EBF4', '#F3C742'],
      },
      datafirst: {
        id: 10,
        formatter: '{c}%',
        name: '优先',
        name2: '优先',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#E7EBF4', '#5AC591'],
      },
      dataordinary: {
        id: 11,
        // kaer: 1,
        formatter: '{c}%',
        name: '普通',
        name2: '普通',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#E7EBF4', '#70B4D4'],
      },
      datastrictly: {
        id: 12,
        // kaer: 1,
        formatter: '{c}%',
        name: '严控',
        name2: '严控',
        cont: '10%',
        top: '35%',
        data: [
          { value: 335, name: '1' },
          { value: 310, name: '2' },
        ],
        textStyle: {
          fontSize: '16',
          color: '#ffffff',
        },
        subtextStyle: {
          fontSize: '28',
          fontWeight: '800',
          color: '#ffffff',
        },
        // color: ['#E7EBF4', '#E64545'],
      },
    }
  },
  components: {
    GraphicEchart,
    SecurityCheckHeader,
  },
  created() {
    this.formatDate()
    this.routdata()
  },
  mounted() {},
  activated() {
    if (Object.keys(this.$route.params).length !== 0) {
      const { beginDate, endDate, places, proxyId } = this.$route.params
      this.queryData.beginDate = beginDate
      this.queryData.endDate = endDate
      if (places && typeof places == 'string') {
        this.FormData.places = [places]
      }
      if (places && typeof places != 'string') {
        this.FormData.places = places
      }
      this.queryData.proxyId = proxyId
    }
    this.relationDate()
  },
  methods: {
    //切换单位
    ups(item, index) {
      this.active = index
      this.relationDate()
    },
    formatDate() {
      let date = new Date()
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      mymonth < 10 ? (mymonth = '0' + mymonth) : mymonth
      myweekday < 10 ? (myweekday = '0' + myweekday) : myweekday
      this.queryData.beginDate = `${myyear}-${mymonth}-${myweekday}`
      this.queryData.endDate = `${myyear}-${mymonth}-${myweekday}`
    },
    search(data) {
      if (typeof data[1] == 'string' && data[1] == '') {
        data[1] = []
      }
      if (typeof data[1] == 'string' && data[1] != '') {
        data[1] = [data[1]]
      }
      this.queryData = {
        beginDate: data[0][0],
        endDate: data[0][1],
        places: data[1],
        proxyId: data[2],
      }
      this.relationDate()
    },
    //点击跳转
    echar(data) {
      // console.log(data)
      let params = {
        startTime: this.queryData.beginDate,
        endTime: this.queryData.endDate,
        destination: data.namech,
        agentCode: this.queryData.proxyId,
        openResult: '',
        riskRating: data.namefa == '总件数' ? '' : data.namefa,
      }
      if (data == '总数') {
        params.riskRating = ''
      }
      // this.$router.push({
      //   path: '/securityCheck/waybillTable',
      //   query: params,
      // })
      if (data.namech !== '') {
        let param = JSON.parse(JSON.stringify(params))
        this.$router.push({
          path: './waybillTable',
          name: 'WaybillTable',
          params: param,
        })
      }
    },
    //货物关联统计接口
    async relationDate() {
      try {
        const result = this.active == 0 ? await agent(this.queryData) : await agentPiece(this.queryData)
        if (result.status == 200 && result.data.length > 0) {
          let arr = [] //高风险
          let Low = [] //低风险
          let firs = [] //优先级
          let pt = []
          let strictly = []
          let arrx = [] //x轴
          result.data.forEach((element) => {
            arrx.push(element.flightLine)
            element.datas.forEach((res) => {
              if (res.level === '高风险') {
                arr.push(res.count)
              } else if (res.level == '低风险') {
                Low.push(res.count)
              } else if (res.level == '优先') {
                firs.push(res.count)
              } else if (res.level == '普通') {
                pt.push(res.count)
              } else if (res.level == '严控') {
                strictly.push(res.count)
              }
            })
            // console.log(arr);
          })
          let arrall = eval(arr.join('+')) //高风险总和
          let Lowall = eval(Low.join('+')) //低风险级总和
          let firsall = eval(firs.join('+')) //优先级总和
          let ptall = eval(pt.join('+')) //普通级总和
          let strictlyall = eval(strictly.join('+')) //严控级总和
          let alldata = arrall + Lowall + firsall + ptall + strictlyall // 总数
          let datas = []
          for (let i = 0; i <= arrx.length; i++) {
            datas[i] = arr[i] + Low[i] + firs[i] + pt[i] + strictly[i]
          }
          // console.log(arrx)
          // arrx.forEach((element) => {
          //   let obj = {
          //     name: element,
          //     lable: element,
          //   };
          //   this.destination.push(obj);
          // });
          this.init(arr, arrx, Low, firs, pt, strictly, datas)
          this.dataall.cont = alldata
          this.dataall.name = this.active == 0 ? '总重量':'总件数'
          this.dataall.name2 = this.active == 0 ? '总重量':'总件数'
          let ar = [] //总数
          let arrrisk = [] //高风险
          let arLowrisk = [] //低风险
          let arrfirst = [] //优先
          let arrordinary = [] //普通
          let arrstrictly = [] //严控
          for (let i = 0; i <= arrx.length; i++) {
            ar[i] = {
              name: arrx[i],
              value: datas[i],
            }
            arrrisk[i] = {
              name: arrx[i],
              value: arr[i],
            }
            arLowrisk[i] = {
              name: arrx[i],
              value: Low[i],
            }
            arrfirst[i] = {
              name: arrx[i],
              value: firs[i],
            }
            arrordinary[i] = {
              name: arrx[i],
              value: pt[i],
            }
            arrstrictly[i] = {
              name: arrx[i],
              value: strictly[i],
            }
          }
          this.dataall.data = ar
          this.datarisk.cont = arrall
          this.datarisk.data = arrrisk
          this.dataLowrisk.cont = Lowall
          this.dataLowrisk.data = arLowrisk
          this.datafirst.cont = firsall
          this.datafirst.data = firs
          this.dataordinary.cont = ptall
          this.dataordinary.data = arrordinary
          this.datastrictly.cont = strictlyall
          this.datastrictly.data = arrstrictly
        } else {
          this.init()
          this.dataall.cont = '0'
          this.dataall.data = []
          this.datarisk.cont = '0'
          this.datarisk.data = []
          this.dataLowrisk.cont = '0'
          this.dataLowrisk.data = []
          this.datafirst.cont = '0'
          this.datafirst.data = []
          this.dataordinary.cont = '0'
          this.dataordinary.data = []
          this.datastrictly.cont = '0'
          this.datastrictly.data = []
        }
      } catch (error) {
        console.log(error)
      }
    },
    async routdata() {
      try {
        const result = await routeall({})
        if (result.status == 200) {
          this.destination = []
          result.data.forEach((element) => {
            let obj = {
              name: element,
              lable: element,
            }
            this.destination.push(obj)
          })
          this.destination.sort(this.up)
        }
      } catch (error) {
        console.log(error)
      }
    },
    up(x, y) {
      return x.lable.charCodeAt(0) - y.lable.charCodeAt(0)
    },
    change() {
      let param = JSON.parse(JSON.stringify(this.queryData))
      this.$router.push({
        path: './cargoRelevanceTable',
        name: 'CargoRelevanceTable',
        params: param,
      })
    },
    init(arr, arrx, Low, firs, pt, strictly, datas) {
      let myChart = this.$echarts.init(document.getElementById('echarts-proportion')) //统计折线
      eleCake.series[0].data = arr
      eleCake.series[1].data = Low
      eleCake.series[2].data = firs
      eleCake.series[3].data = pt
      eleCake.series[4].data = strictly
      eleCake.series[5].data = datas
      eleCake.xAxis.data = arrx
      myChart.clear()
      myChart.setOption(eleCake, true)
      window.onresize = () => {
        myChart.resize()
      }
      let that = this
      myChart.on('click', (a, b) => {
        let params = {
          startTime: that.queryData.beginDate,
          endTime: that.queryData.endDate,
          destination: '',
          agentCode: that.queryData.proxyId,
          openResult: '',
          riskRating: '',
        }
        params.riskRating = a.seriesName
        params.destination = a.name
        let param = JSON.parse(JSON.stringify(params))
        if (a.seriesName !== '总数') {
          that.$router.push({
            path: './waybillTable',
            name: 'WaybillTable',
            params: param,
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.up {
  padding-top: 12px;
}
.header {
  display: flex;
  justify-content: space-between;
  padding-right: 3%;
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
  > .conten {
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei;
      color: #101116;
    }
  }
}
.content_top {
  width: 100%;
  height: 41vh;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 24px;
  .conten {
    width: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .log_cont {
      width: 80px;
      height: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #101116;
      border-radius: 4px;
      color: #ffffff;
      border: 2px solid #101116;
      > .cont {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .log_type {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .log_types {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #ffffff;
          color: #101116;
          cursor: pointer;
        }
      }
    }
  }
}
#echarts-proportion {
  width: 100%;
  height: 90%;
}
.content_bottom {
  width: 100%;
  height: 33vh;
  background: #ffffff;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 24px;
  > .content_classification {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
#echarts-distribution {
  width: 100%;
  height: 80%;
}
.chart {
  width: 16%;
  height: 200px;
}
</style>